<template>
	<view class="ithui-content">
		<!-- #ifndef H5 -->
		<!-- <view class="h5title">我的余额</view> -->
		<!-- #endif -->
		<view class="ithui-view">
			<view class="view-info">
				<view class="userinfo" style="position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; z-index: 89;">
					<view class="flex">
						<!-- <image class="userinfo-headimg" :src="userData.headimgurl" mode="aspectFill" /> -->
						<view class="flex-one">
							<view class="flex-one-text" style="font-size: 20px;">代理名称：{{ agent.agentName }}</view>
							<!-- <view class="flex-one-text">代理编码：{{ agent.agentCode }}</view> -->
							<view class="flex-one-text">状态：{{ agent.agentStatus === 1 ? "启用":"禁用" }}</view>
							<view class="flex-one-text">联系方式：{{ agent.phone === null ? "暂无联系方式" : agent.phone }}</view>
						</view>
						<view class="arrow arrow-one" @click="showModal = true"><span>名词解释</span></view>
					</view>
				</view>
				<u-modal :show="showModal" title="名词解释" confirmText="我已知晓" @confirm="showModal = false" style="font-size: 13px;"
					confirmColor="#ff1e0f">
					<view class="slot-content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</u-modal>
				<view class="box" style="position: fixed; top: 0; left: 50%; transform: translateX(-50%); margin-top: 120px; z-index: 90;">
					<view class="tx">
						<view class="tx-grid">
							<view class="tx-grid-text">
								<view class="title">余额</view>
								<view class="money">
									<text>{{ agent.price }}</text>
									<text class="money-b">元</text>
								</view>
							</view>
						</view>
					<!-- 	<view class="tx-grid" @click="navTo('/pages/withdraw/index')"><span
								class="tx-grid-comm-sign">立即提现</span></view> -->
								
						<view class="tx-grid" @click="open" >
							<span class="tx-grid-comm-sign">{{ before }} ~ {{ after }}</span>
						</view>
					</view>
					<!-- <view class="palace palace-one">
						<view class="palace-grid">
							<view class="palace-grid-text">
								<view class="palace-grid-text-data">
									<text>{{ agent.consume }}</text>
									<text class="palace-grid-text-data-b">元</text>
								</view>
								<view class="palace-grid-text-name">业绩消耗（总）</view>
							</view>
						</view>
						<view class="palace-grid">
							<view class="palace-grid-text">
								<view class="palace-grid-text-data">
									<text>{{ agent.addFunds }}</text>
									<text class="palace-grid-text-data-b">元</text>
								</view>
								<view class="palace-grid-text-name">加款（总）</view>
							</view>
						</view>
						<view class="palace-grid">
							<view class="palace-grid-text">
								<view class="palace-grid-text-data">
									<text>{{ agent.credit }}</text>
									<text class="palace-grid-text-data-b">元</text>
								</view>
								<view class="palace-grid-text-name">授信金额（总）</view>
							</view>
						</view>
					</view> -->
				</view>
				
				<view class="top" scroll-y style="margin-top: 210px;">
					<u-subsection :list="tabs" fontSize="14" activeColor="#ff8440" :current="tabIndex"
						@change="changeTab"></u-subsection>
					<u-empty v-if="orderList.length === 0" style="margin-top: 40rpx;" mode="order" text="暂无记录" iconSize="140"
						textSize="32">
					</u-empty>
				</view>
				<scroll-view class="list-view" scroll-y v-if="typeDate == 'Deduction' || typeDate == 'AddFunds'">
				  <view class="list-item" v-for="(item, index) in orderList" :key="index" hover-class="hover" :hover-stay-time="150" bindtap="detail">
				    <view class="content-box">
				      <view class="des-box">
				        <view class="tit">
				          {{ item.agentName }}
				        </view>
				        <view v-if="tabIndex == 3" class="source" :style="{ color: item.status == 1 ? '#4caf50' : item.status == 2 ? '#00b7ff' : '#ff1e0f' }">
				          提现{{ item.status == 1 ? '成功' : item.status == 2 ? '处理中' : '失败' }}
				        </view>
				        <view class="time">{{ item.gmtCreate }}</view>
				      </view>
				    </view>
				    <view class="money" :class="{ less: is_withdraw }">
				      {{ is_withdraw ? '-' : '+' }}{{ tabIndex == 3 ? item.real_money : item.changePrice }}<text style="font-size: 13px;"> 元</text>
				    </view>
					 
				  </view>
				  <cc-listPageView :totalNum="totalNum" :pageCount="pageSize" :curPageNum="current" @pageClick="pageClick">
				  </cc-listPageView>
				</scroll-view>
				<scroll-view class="list-view" scroll-y v-if="typeDate == 'RESOURCE'">
				  <view class="list-item" v-for="(item, index) in orderList" :key="index" hover-class="hover" :hover-stay-time="150" bindtap="detail">
				    <view class="content-box">
				      <view class="des-box">
				        <view class="tit">
				          {{ item.productName }}
				        </view>
				        <view v-if="tabIndex == 3" class="source" :style="{ color: item.productStatus == 2 ? '#00b800' : '#ff1e0f' }">
				          <!-- {{ item.productStatus == 1 ? '成功' : item.status == 2 ? '处理中' : '失败' }} -->
				          {{ item.productStatus == 2 ? '上架' : '下架' }}
				        </view>
				        <!-- <view class="money" :class="{ less: is_withdraw }">{{ item.price }}元</view> -->
				      </view>
				    </view>
				   <view class="money" :class="{ less: is_withdraw }">
				      {{ item.price }}<text style="font-size: 13px;"> 元</text>
				    </view>
				  </view>
				  <cc-listPageView :totalNum="totalNum" :pageCount="pageSize" :curPageNum="current" @pageClick="pageClick">
				  </cc-listPageView>
				</scroll-view>
				<!-- <view class="tip">没有了哦</view> -->
			</view>
		</view>
		<view>
		    <uni-calendar 
		    ref="calendar"
		    :insert="false"
		    @confirm="confirmCalendar"
			:clearDate="false"
			:range ="true"
		     />
		</view>
	</view>
</template>

<script>
	import common from 'common/common.js';
	export default {
		data() {
			const currentDate = new Date();
			const formattedCurrentDate = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`;
			const nextDay = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}-${(currentDate.getDate() + 1).toString().padStart(2, '0')}`;
			return {
				is_withdraw: true,
				orderList: [],
				userData: {}, 
				showModal: false,
				typeDate: 'Deduction',
				content: `<p><em style="font-style:normal;color:#ff1e0f">业绩消耗（总）：</em>当前时间段代理商的总业绩</p>
				          <p><em style="font-style:normal;color:#ff1e0f">加款（总）：</em>当前时间段代理商的总加款</p>
				          <p><em style="font-style:normal;color:#ff1e0f">授信金额（总）：</em>当前时间段代理商的总授信</p>
				          <p><em style="font-style:normal;color:#ff1e0f">*注：所有金额币种均为人民币，单位为元，符号￥</em></p>
				         `,
				tabs: ['业绩消耗', '加款', '授信', '代理资源'],
				tabIndex: 0,
				totalNum: 0,
				current: 1,
				agent: {},
				after: nextDay,
				before: formattedCurrentDate,
				pageSize: 10,
			}
		},
		onLoad(options) {
			this.agent = JSON.parse(decodeURIComponent(options.agent));
			uni.showLoading({
				title: '加载中'
			});
			this.getAgentDetailByTime()
		},
		methods: {
			// 打开日历
			open(){
				this.$refs.calendar.open();
			},
			// 时间确认选择
			confirmCalendar(e) {
				this.after = e.range.after;
				this.before = e.range.before;
				if(e.range.after === ""){
					this.after = this.before;
				} else if(e.range.before === ""){
					this.before = this.after;
				}
				if( this.after < this.before){
					var temp = this.after;
					this.after = this.before;
					this.before = temp;
				}
				this.getAgentDetailByTime();
			},
			// 分页事件
			pageClick(tag) {
				if (tag === 0) {
					// 上一页 (不等于第一页)
					if (this.current > 1) {
						this.current--;
						this.getAgentDetailByTime();
					}
				} else {
					// 下一页 (不等于最后一页)
					if (this.totalNum > (this.current * this.pageSize)) {
						this.current++;
						this.getAgentDetailByTime();
					}
				}
			},
			// 根据选择的tab，获取当前tab的分页数据
			// getAgentItemDetailByTime(){
			// 	var that = this;
			// 	uni.request({
			// 		url: common.api_base_url+'/agent/itemPageDetail',
			// 		data:{
			// 			agentId: that.agent.id,
			// 			startTime: that.before,
			// 			endTime: that.after,
			// 			tab: that.tabIndex, // item类型
			// 			currentPage: that.pageIndex[that.tabs[this.tabIndex]], // 当前页
			// 	     pageSize: that.pageSize
			// 		},
			// 		header:{
			// 		},
			// 		method: 'POST',
			// 		success: res => {
			// 			if(res.data.success){
			// 				that.list = res.data.data;
			// 			} else {
			// 				uni.showToast({
			// 					title: res.data.message,
			// 					duration: 2000,
			// 					icon:"error"
			// 				})
			// 			}
			// 		},
			// 		fail: function(e) {
			// 			uni.showToast({
			// 				title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
			// 				icon:"loading"
			// 			})
			// 		},
			// 	});
			// },
			//  根据时间和id获取代理的详细信息
			getAgentDetailByTime(){
				uni.showLoading({
					title: '加载中'
				});
				var dateTimeRange = [this.before,this.after]
				var _this = this;
				uni.request({
					url: common.base_url+'/agent/agentDetail',
					data:{
						current: _this.current, // 当前页
						pageSize: _this.pageSize,
						id: _this.agent.id,
						dateTimeRange: dateTimeRange,
						type: _this.typeDate
					},
					header:{
					},
					method: 'POST',
					success: res => {
						console.log(res)
						if(res.statusCode == 200){
							if(res.data.data.length == 0){
								_this.current = 1;
							}
							_this.totalNum = res.data.total;
							_this.orderList = res.data.data;
							
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon:"error"
							})
						}
						uni.hideLoading();
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
			// 点击切换tab
			changeTab(index) {
				this.tabIndex = index;
				this.orderList = []
				if (this.tabIndex == 0) {
					this.typeDate = 'Deduction';
					this.is_withdraw = true;
					this.getAgentDetailByTime()
				} else if (this.tabIndex == 1) {
					this.is_withdraw = false;
					this.typeDate = 'AddFunds';
					this.is_withdraw = false;
					this.getAgentDetailByTime()
				} else if (this.tabIndex == 2) {
					// this.typeDate = 'incomeYesterday';
					// this.is_withdraw = false;
					uni.showToast({
						title:"暂无授信信息",
						icon: "error"
					})
					return;
				} else if (this.tabIndex == 3) {
					this.typeDate = 'RESOURCE';
					this.is_withdraw = false;
					this.getAgentDetailByTime()
				}
				uni.showLoading({
					title: '加载中'
				});
				// this.getFundList();
				// this.getAgentItemDetailByTime()
				// setTimeout(() => {
				// 	uni.hideLoading();
				// }, 500);
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			}
		},
		// onPullDownRefresh() {
		// 	uni.showLoading({
		// 		title: '加载中'
		// 	});
		// 	this.showModal = false
		// 	this.initData();
		// 	setTimeout(() => {
		// 		uni.hideLoading();
		// 	}, 500);
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh();
		// 	}, 500);
		// }
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	
	 //   .styled-container {
	 //     background-color: #f0f0f0;
	 //     padding: 10px;
	 //     border-radius: 8px;
	 //     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	 //   }
	 
	 //   .label {
	 //     color: #333;
	 //     font-weight: bold;
	 //     margin-right: 10px;
	 //   }
	 
	 //   .styled-button {
	 //     background-color: #007acc;
	 //     color: #fff;
	 //     border: none;
	 //     padding: 8px 16px;
	 //     border-radius: 5px;
	 //     cursor: pointer;
	 //     transition: background-color 0.3s ease;
	 //   }
	 
	 //   .styled-button:hover {
	 //     background-color: #005ea6;
	 //   }
	
	@import "@/uni_modules/uview-ui/index.scss";
	::v-deep .u-modal__content {
		justify-content: flex-start;
	}

	.flex {
		display: flex;
		align-items: center;
		padding: 50rpx;
		position: relative;

		&-one {
			flex: 1;
			min-width: 0;
			font-size: 26rpx;
			color: #333;

			&-text {
				margin: 10rpx 0;
				color: #f5f5f5;
				font-weight: normal;
			}
		}
	}


	.ithui {
		&-content {
			.h5title {
				width: 100%;
				height: 120rpx;
				text-align: center;
				line-height: 200rpx;
				color: white;
				font-size: 34rpx;
				font-weight: bold;
				background: linear-gradient(to right, #ff8440, #ff1e0f);
			}

			.list-view {
				position: relative;
				width: 100%;
				overflow: hidden;
			}

			.list-item {
				width: 100%;
				padding: 30rpx 28rpx;
				box-sizing: border-box;
				background: #fff;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				border-bottom: 1rpx solid #eaeef1;
			}

			.item-last::after {
				left: 0 !important;
			}

			.content-box {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
			}

			.des-box {
				min-height: 80rpx;
				padding-left: 28rpx;
				box-sizing: border-box;
				vertical-align: top;
				color: #333;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.tit {
				font-size: 32rpx;
				max-width: 420rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.source {
				margin: 12rpx 0;
			}

			.time {
				color: #888;
			}

			.money {
				font-size: 38rpx;
				font-weight: 500;
				color: #ff1e0f;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-left: 20rpx;
			}

			.less {
				color: #4caf50 !important;
			}

			.tip {
				margin-top: 50rpx;
				display: flex;
				justify-content: center;
				align-content: center;
				font-size: 24rpx;
				color: #888;
			}

		}

		&-view {
			width: 100%;
			height: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;

			.view-info {
				width: 100%;
				height: 100%;
				flex: 1;
				overflow-y: auto;
				overflow-x: hidden;
				position: relative;
				// padding-bottom: 116rpx;

				.userinfo {
					background: linear-gradient(to right, #ff8440, #ff1e0f);
					background-color: #ff8440;
					padding-bottom: 100rpx;


					.userinfo-headimg {
						width: 130rpx;
						height: 130rpx;
						border-radius: 100%;
						overflow: hidden;
						margin-right: 20rpx;
						border: 4rpx solid rgba(255, 255, 255, 0.3);
					}


					.arrow {
						position: relative;
						padding-right: 30rpx;

						span {
							font-size: 28rpx;
							color: white;
						}

						&:after {
							content: ' ';
							display: inline-block;
							height: 12rpx;
							width: 12rpx;
							border-width: 4rpx 4rpx 0 0;
							border-color: #848484;
							border-style: solid;
							transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
							position: relative;
							top: -4rpx;
							position: absolute;
							top: 50%;
							margin-top: -8rpx;
							right: 4rpx;
							border-radius: 2rpx;
						}
					}

					.arrow-one:after {
						border-color: white;
						margin-top: -6rpx;
					}
				}

				.box {
					width: 94%;
					background: white;
					border-radius: 10rpx;
					margin: -120rpx auto 20rpx;
					box-shadow: 0 6rpx 20rpx #e7e7e7;

					.tx {
						padding-top: 26rpx;
						overflow: hidden;
						display: flex;
						justify-content: space-between;
						align-content: center;

						&-grid {
							box-sizing: border-box;

							&:first-child {
								margin-left: 40rpx;
							}

							&-comm-sign {
								display: block;
								border-radius: 40rpx 0 0 40rpx;
								font-size: 26rpx;
								padding: 16rpx 44rpx;
								background: linear-gradient(to right, #fef082, #ffc551);
								background-color: #fef082;
								color: #cf4400;
							}

							&-text {
								display: block;
								color: #333;
								font-size: 26rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;

								.title {
									font-size: 32rpx;
									font-weight: normal;
									color: #ff6423;
								}

								.money {
									font-size: 60rpx;
									color: #ff6423;
									letter-spacing: 2rpx;
									margin-bottom: 10rpx;

									&-b {
										font-size: 28rpx;
									}
								}
							}
						}
					}

					.palace {
						padding-bottom: 20rpx;
						overflow: hidden;
						display: flex;
						justify-content: center;

						&-grid {
							flex: 1;
							position: relative;
							box-sizing: border-box;

							&:not(:last-child) {
								&:after {
									width: 1rpx;
									height: 80rpx;
									background: #fddece;
									content: ' ';
									display: inline-block;
									position: absolute;
									top: 0;
									right: 0;
								}
							}

							&-text {
								display: block;
								text-align: center;
								color: #333;
								font-size: 32rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;

								&-name {
									font-size: 26rpx;
									font-weight: normal;
									color: #ff8a4a;
								}

								&-data {
									font-size: 32rpx;
									color: #ff8a4a;
									letter-spacing: 2rpx;
									margin-bottom: 5rpx;

									&-b {
										font-size: 20rpx;
									}
								}
							}
						}
					}
				}
			}
		}

	}
</style>